<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人月度统计</title>
  <style>
    #chart {
        width: 900px;
        height: 500px;
        margin: 50px auto;
    }
  </style>
</head>
<body>

<h2 style="text-align: center;">联系人月度新增数量趋势图</h2>
<div id="chart"></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  const months = [[${months}]];
  const counts = [[${counts}]];

  const chart = echarts.init(document.getElementById('chart'));

  const option = {
      tooltip: {
          trigger: 'axis'
      },
      xAxis: {
          type: 'category',
          data: months
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          name: '新增联系人数量',
          type: 'line',
          data: counts,
          smooth: true,
          itemStyle: {
              color: '#5470C6'
          },
          areaStyle: {
              color: 'rgba(84,112,198,0.3)'
          },
          label: {
              show: true,
              position: 'top'
          }
      }]
  };

  chart.setOption(option);
  /*]]>*/
</script>

</body>
</html>
